<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>使用rem适配不同屏幕的移动设备 | Jason&#39;s Blog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="使用rem适配不同屏幕的移动设备">
<meta property="og:type" content="article">
<meta property="og:title" content="使用rem适配不同屏幕的移动设备">
<meta property="og:url" content="https://xianguoji.gitee.io/myblog/2016/08/15/2016-08-15-%E4%BD%BF%E7%94%A8rem%E9%80%82%E9%85%8D%E4%B8%8D%E5%90%8C%E5%B1%8F%E5%B9%95%E7%9A%84%E7%A7%BB%E5%8A%A8%E8%AE%BE%E5%A4%87/index.html">
<meta property="og:site_name" content="Jason&#39;s Blog">
<meta property="og:description" content="使用rem适配不同屏幕的移动设备">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://xianguoji.gitee.io/myblog/images/rem适配/203813p1g7mjl1hgrzrgxe.jpg">
<meta property="article:published_time" content="2016-08-14T16:00:00.000Z">
<meta property="article:modified_time" content="2020-08-13T02:12:38.265Z">
<meta property="article:author" content="Jason">
<meta property="article:tag" content="rem">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://xianguoji.gitee.io/myblog/images/rem适配/203813p1g7mjl1hgrzrgxe.jpg">
  
    <link rel="alternate" href="/myblog/" title="Jason&#39;s Blog" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/myblog/css/style.css">

<meta name="generator" content="Hexo 5.0.2"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/myblog/" id="logo">人与人的悲欢并不相通，孤独是生命的本质。</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/myblog/" id="subtitle">欢迎来到我的个人网站</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/myblog/">Home</a>
        
          <a class="main-nav-link" href="/myblog/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/myblog/" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://xianguoji.gitee.io/myblog"></form>
      </div>
    </div>
  </div>
</header>
<style>
  #logo{
    text-shadow:0 0 5px #000;
    /* font-weight: bold; */
  }
  #subtitle-wrap{
    margin-top: 50px;
  }
</style>
      <div class="outer">
        <section id="main"><article id="post-2016-08-15-使用rem适配不同屏幕的移动设备" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2016/08/15/2016-08-15-%E4%BD%BF%E7%94%A8rem%E9%80%82%E9%85%8D%E4%B8%8D%E5%90%8C%E5%B1%8F%E5%B9%95%E7%9A%84%E7%A7%BB%E5%8A%A8%E8%AE%BE%E5%A4%87/" class="article-date">
  <time datetime="2016-08-14T16:00:00.000Z" itemprop="datePublished">2016-08-15</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      使用rem适配不同屏幕的移动设备
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>rem：是指相对于根元素（即html元素）的字体大小的单位。是CSS3新增的一个相对单位，使用rem为元素设定字体大小时，相对大小对比的是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。</p>
<h3 id="方案一："><a href="#方案一：" class="headerlink" title="方案一："></a>方案一：</h3><h4 id="先设置header里面的meta标签："><a href="#先设置header里面的meta标签：" class="headerlink" title="先设置header里面的meta标签："></a>先设置header里面的meta标签：</h4><pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1,maximum-scale=1, minimum-scale=1&quot;&gt;</code></pre>
<h4 id="在header写上script标签"><a href="#在header写上script标签" class="headerlink" title="在header写上script标签:"></a>在header写上script标签:</h4><pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
 　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + &#39;px&#39;;
 &lt;/script&gt;</code></pre>
<h4 id="我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据您自己的需，大家也可以参考下图："><a href="#我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据您自己的需，大家也可以参考下图：" class="headerlink" title="我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据您自己的需，大家也可以参考下图："></a>我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据您自己的需，大家也可以参考下图：</h4><img src="/myblog/images/rem适配/203813p1g7mjl1hgrzrgxe.jpg">

<p>想用其他参数的，也可以去<a target="_blank" rel="noopener" href="http://pxtoem.com/">http://pxtoem.com/</a>这个网站去设置</p>
<h2 id="常用写法："><a href="#常用写法：" class="headerlink" title="常用写法："></a>常用写法：</h2><h2 id="css"><a href="#css" class="headerlink" title="css:"></a>css:</h2><pre><code>html &#123;
    font-size: 62.5%;
    /*10 ÷ 16 × 100% = 62.5%*/
&#125;
body &#123;
    font-size: 1.4rem;
    /*1.4 × 10px = 14px */
&#125;
h1 &#123;
    font-size: 2.4rem;
    /*2.4 × 10px = 24px*/
&#125;</code></pre>
<p>在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）。从上面的计算结果，我们使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之处。<br>注：在Chrome下，默认最下字体为12px,可以设置font-size: 625%</p>
<h3 id="方案二："><a href="#方案二：" class="headerlink" title="方案二："></a>方案二：</h3><h2 id="此方案仅适用于移动端web"><a href="#此方案仅适用于移动端web" class="headerlink" title="此方案仅适用于移动端web"></a>此方案仅适用于移动端web</h2><p>该方案使用相当简单，把下面这段已压缩过的 原生JS（仅1kb，源码已在文章底部更新，2017/5/3） 放到 HTML 的 head 标签中即可（注:不要手动设置viewport，该方案自动帮你设置）</p>
<pre><code>&lt;script&gt;!function(e)&#123;function t(a)&#123;if(i[a])return i[a].exports;var n=i[a]=&#123;exports:&#123;&#125;,id:a,loaded:!1&#125;;return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports&#125;var i=&#123;&#125;;return t.m=e,t.c=i,t.p=&quot;&quot;,t(0)&#125;([function(e,t)&#123;&quot;use strict&quot;;Object.defineProperty(t,&quot;__esModule&quot;,&#123;value:!0&#125;);var i=window;t[&quot;default&quot;]=i.flex=function(e,t)&#123;var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d&#123;3&#125;)/i),l=o.match(/U3\/((\d+|\.)&#123;5,&#125;)/i),c=l&amp;&amp;parseInt(l[1].split(&quot;.&quot;).join(&quot;&quot;),10)&gt;=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&amp;&amp;d[1]&gt;534||c||(s=1);var u=1/s,m=r.querySelector(&#39;meta[name=&quot;viewport&quot;]&#39;);m||(m=r.createElement(&quot;meta&quot;),m.setAttribute(&quot;name&quot;,&quot;viewport&quot;),r.head.appendChild(m)),m.setAttribute(&quot;content&quot;,&quot;width=device-width,user-scalable=no,initial-scale=&quot;+u+&quot;,maximum-scale=&quot;+u+&quot;,minimum-scale=&quot;+u),r.documentElement.style.fontSize=a/2*s*n+&quot;px&quot;&#125;,e.exports=t[&quot;default&quot;]&#125;]);  flex(100, 1);&lt;/script&gt;</code></pre>
<h2 id="代码原理"><a href="#代码原理" class="headerlink" title="代码原理"></a>代码原理</h2><p>这是阿里团队的高清方案布局代码，所谓高清方案就是根据设备屏幕的DPR（设备像素比，又称DPPX，比如dpr=2时，表示1个CSS像素由4个物理像素点组成）** 动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值，进而达到高清效果**。</p>
<h2 id="有何优势"><a href="#有何优势" class="headerlink" title="有何优势"></a>有何优势</h2><p>引用简单，布局简便<br>根据设备屏幕的DPR,自动设置最合适的高清缩放。<br>保证了不同设备下视觉体验的一致性。（老方案是，屏幕越大元素越大；此方案是，屏幕越大，看的越多）<br>有效解决移动端真实1px问题（这里的1px 是设备屏幕上的物理像素）</p>
<h2 id="如何使用"><a href="#如何使用" class="headerlink" title="如何使用"></a>如何使用</h2><p>重要的事情说三遍！</p>
<p>绝不是每个地方都要用rem，rem只适用于固定尺寸！</p>
<p>绝不是每个地方都要用rem，rem只适用于固定尺寸！</p>
<p>绝不是每个地方都要用rem，rem只适用于固定尺寸！</p>
<p>在相当数量的布局情境中（比如底部导航元素平分屏幕宽，大尺寸元素），你必须使用百分比或者flex才能完美布局！<br>看过 《手机端页面自适应解决方案—rem布局》的朋友，应该对rem有所了解，这里不再赘述，<br>此方案也是默认 1rem = 100px，所以你布局的时候，完全可以按照设计师给你的效果图写各种尺寸啦。<br>比如你在效果图上量取的某个按钮元素长 55px, 宽37px ，那你直接可以这样写样式：</p>
<pre><code>.myBtn &#123;
   width: 0.55rem;
   height: 0.37rem;
&#125;</code></pre>
<p><a target="_blank" rel="noopener" href="https://minooo.github.io/Demo/react-study-step-03-demo/index.html#/">实践应用源码1（请在手机端或者手机模式下浏览效果更佳！）</a></p>
<p><a target="_blank" rel="noopener" href="https://minooo.github.io/Demo/react-study-step-04-demo/index.html#/">实践应用源码2（请在手机端或者手机模式下浏览效果更佳！）</a></p>
<p><a target="_blank" rel="noopener" href="https://codepen.io/minooo/pen/WoQjKW?editors=1100">示例源码</a></p>
<p>著作权归作者所有。部分转载自<em>minooo</em></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2016/08/15/2016-08-15-%E4%BD%BF%E7%94%A8rem%E9%80%82%E9%85%8D%E4%B8%8D%E5%90%8C%E5%B1%8F%E5%B9%95%E7%9A%84%E7%A7%BB%E5%8A%A8%E8%AE%BE%E5%A4%87/" data-id="ckds6fx9y0001k8qcd0hab6gy" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/myblog/tags/rem/" rel="tag">rem</a></li></ul>

    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/myblog/2016/08/23/2016-08-23-%E7%A7%BB%E5%8A%A8%E7%AB%AF-%E7%BD%91%E6%98%93-rem%E9%80%82%E9%85%8D/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          移动端-网易-rem适配
        
      </div>
    </a>
  
  
    <a href="/myblog/2015/08/25/2015-08-25-HEXO%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">转发潘柏信的--HEXO搭建个人博客</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/js/" rel="tag">js</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/rem/" rel="tag">rem</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E5%85%B6%E4%BB%96/" rel="tag">其他</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E5%8D%9A%E5%AE%A2/" rel="tag">博客</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" rel="tag">性能优化</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E6%A1%86%E6%9E%B6/" rel="tag">框架</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E7%A7%BB%E5%8A%A8%E7%AB%AF/" rel="tag">移动端</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E8%B7%A8%E5%9F%9F%E8%AF%B7%E6%B1%82/" rel="tag">跨域请求</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/myblog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/myblog/tags/js/" style="font-size: 10px;">js</a> <a href="/myblog/tags/rem/" style="font-size: 16.67px;">rem</a> <a href="/myblog/tags/%E5%85%B6%E4%BB%96/" style="font-size: 10px;">其他</a> <a href="/myblog/tags/%E5%8D%9A%E5%AE%A2/" style="font-size: 13.33px;">博客</a> <a href="/myblog/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" style="font-size: 13.33px;">性能优化</a> <a href="/myblog/tags/%E6%A1%86%E6%9E%B6/" style="font-size: 10px;">框架</a> <a href="/myblog/tags/%E7%A7%BB%E5%8A%A8%E7%AB%AF/" style="font-size: 13.33px;">移动端</a> <a href="/myblog/tags/%E8%B7%A8%E5%9F%9F%E8%AF%B7%E6%B1%82/" style="font-size: 10px;">跨域请求</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2020/08/">August 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/06/">June 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/05/">May 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/04/">April 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/03/">March 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/02/">February 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/01/">January 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2016/10/">October 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2016/09/">September 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2016/08/">August 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2015/08/">August 2015</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/myblog/2020/08/13/2020-08-13%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86/">(no title)</a>
          </li>
        
          <li>
            <a href="/myblog/2017/06/18/2017-06-18-%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B8%80/">前端性能优化一</a>
          </li>
        
          <li>
            <a href="/myblog/2017/05/15/2017-05-15-%E8%B0%83%E7%94%A8%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E6%8F%92%E4%BB%B6-%E6%9B%B4%E6%96%B0/">调用百度地图插件-更新</a>
          </li>
        
          <li>
            <a href="/myblog/2017/04/23/2017-04-23-vue%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE/">vue搭建项目</a>
          </li>
        
          <li>
            <a href="/myblog/2017/04/21/2017-04-21-%E8%B0%83%E7%94%A8%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E6%8F%92%E4%BB%B6/">调用百度地图插件</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2020 Jason<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/myblog/" class="mobile-nav-link">Home</a>
  
    <a href="/myblog/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/myblog/fancybox/jquery.fancybox.css">

  
<script src="/myblog/fancybox/jquery.fancybox.pack.js"></script>




<script src="/myblog/js/script.js"></script>




  </div>
</body>
</html>